import { useFocusEffect } from "@react-navigation/native";
import { useCallback, useState } from "react";
import {
  Image,
  ScrollView,
  Text,
  TouchableOpacity,
  View,
  StyleSheet,
} from "react-native";
import { getStorageData } from "utils";
import translate from "utils/translate";

export default ({
  navigation,
  route: { params },
}: RootStackScreenProps<"classManage">) => {
  const [classList, setclassList] = useState<RootStackParamList["addModel"][]>(
    []
  );
  const [defaultId, setDefaultId] = useState("");
  useFocusEffect(
    useCallback(() => {
      getStorageData("defaultGoods").then((value) => {
        // const defaultId = value;
        setDefaultId(value ?? "");
      });
      getStorageData("classList").then((value) => {
        setclassList(value ? JSON.parse(value) : []);
      });
    }, [])
  );

  return (
    <View style={{ flex: 1 }}>
      <ScrollView
        style={{
          flex: 1,
        }}
        contentContainerStyle={{
          alignItems: "center",
        }}
      >
        {classList.map((item, index) => {
          return (
            <TouchableOpacity
              key={item.id}
              style={{
                flexDirection: "row",
                backgroundColor: "#fff",
                width: "90%",
                marginTop: 10,
                borderRadius: 10,
                padding: 18,
                justifyContent: "space-between",
                height: 100,
                position: "relative",
              }}
              onPress={() => {
                if (params?.type === "manage") {
                  const { createTime, ...rest } = item;
                  navigation.navigate("addModel", {
                    ...rest,
                    index,
                  });
                } else {
                  navigation.navigate("goods", {
                    index,
                  });
                }
              }}
            >
              <View
                style={{
                  justifyContent: "space-between",
                }}
              >
                <Text
                  style={{
                    fontSize: 20,
                  }}
                >
                  {item.className}
                </Text>
                <Text style={{ color: "#8799a3" }}>
                  {translate("class.AddTime")}:{item.createTime}
                </Text>
              </View>
              <View
                style={{
                  flexDirection: "row",
                  alignItems: "center",
                }}
              >
                <Text style={{ color: "#8799a3" }}>
                  {params?.type !== "manage"
                    ? translate("class.ViewProduct")
                    : translate("class.ListManagement")}
                </Text>
                <Image
                  style={{
                    width: 24,
                    height: 24,
                  }}
                  source={require("assets/images/arrow-right-bold.png")}
                ></Image>
              </View>
              <Text
                style={{
                  position: "absolute",
                  right: 8,
                  top: 6,
                  color: "#0081ff",
                }}
              >
                {item.modelName}
              </Text>
              {defaultId == item.id && (
                <Image
                  style={{
                    width: 32,
                    height: 32,
                    position: "absolute",
                    right: 120,
                    top: 10,
                  }}
                  source={require("assets/images/favorite.png")}
                ></Image>
              )}
            </TouchableOpacity>
          );
        })}
        {classList.length === 0 && (
          <View
            style={{
              alignItems: "center",
              marginTop: 40,
            }}
          >
            <Image
              style={{
                width: 45,
                height: 45,
                marginBottom: 20,
              }}
              source={require("assets/images/car.png")}
            ></Image>
            <Text>{translate("main.empty")}~</Text>
          </View>
        )}
      </ScrollView>
      {params?.type !== "manage" && (
        // <View
        //   style={{
        //     flexDirection: "row",
        //     justifyContent: "space-around",
        //     marginBottom: 15,
        //     marginTop: 15,
        //   }}
        // >
        //   <Button
        //     title="添加分类"
        //     onPress={() => {
        //       navigation.navigate("addClass", {});
        //     }}
        //   ></Button>
        //   <Button
        //     title="管理分类"
        //     color={"#E6A23C"}
        //     onPress={() => {
        //       navigation.navigate("classManage", {});
        //     }}
        //   ></Button>
        // </View>
        <View
          style={{
            flexDirection: "row",
          }}
        >
          <TouchableOpacity
            onPress={() => {
              navigation.navigate("addClass", {});
            }}
            style={{ ...styles.button, backgroundColor: "#4768f3" }}
          >
            <Text
              style={{
                textAlign: "center",
                color: "#fff",
              }}
            >
              {translate("class.AddSort")}
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              navigation.navigate("classManage", {});
            }}
            style={{ ...styles.button, backgroundColor: "#8da1f5" }}
          >
            <Text
              style={{
                textAlign: "center",
                color: "#fff",
              }}
            >
              {translate("class.ListManagement")}
            </Text>
          </TouchableOpacity>
        </View>
      )}
    </View>
  );
};
const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "#fff" },
  button: {
    backgroundColor: "#0A59F7",
    width: "50%",
    height: 50,
    // borderRadius: 16,
    alignItems: "center",
    justifyContent: "center",
    alignSelf: "center",
  },
});
